

const { ccclass, property, menu } = cc._decorator;

@ccclass
@menu('common/BaseWindow')
export default class BaseWindow extends cc.Component {

    @property(cc.Node)
    black: cc.Node = null;

    @property(cc.Node)
    content: cc.Node = null;

    @property
    allowClickToHide: boolean = false;

    protected onLoad(): void {
        this.black = cc.find('blackSpr', this.node);
        this.content = cc.find('Content', this.node);

        this.black.height = 10000;
    }

    protected onEnable(): void {
        if (this.allowClickToHide) {
            this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this, true);
        }
    }

    protected onDisable(): void {
        if (this.allowClickToHide) {
            this.node.off(cc.Node.EventType.TOUCH_START, this.onTouchStart, this, true);
        }
    }

    protected onTouchStart(evt: cc.Event.EventTouch) {
        if (this.allowClickToHide) {

            const box = this.content.getBoundingBoxToWorld();
            if (box.contains(evt.getLocation())) {
                return;
            }

            this.closeWind();
        }
    }

    showWnd(cb?: () => void) {
        this.node.active = true;

        cc.tween(this.black)
            .set({ opacity: 0 })
            .by(0.1, { opacity: 171 })
            .start();

        cc.tween(this.content)
            .set({ scale: 0.1 })
            .to(0.2, { scale: 1 }, { easing: 'sineIn' })
            .call(() => {
                cb && cb();
            })
            .start();

    }

    closeWind(cb?: () => void) {
        cc.tween(this.black)
            .set({ opacity: 177 })
            .to(0.1, { opacity: 0 })
            .start();

        cc.tween(this.content)
            .set({ scale: 0.1 })
            .to(0.1, { scale: 0 }, { easing: 'sineIn' })
            .call(() => {
                this.node.active = false;
                cb && cb();
            })
            .start();
    }

    protected onCloseBtnClicked() {
        this.closeWind();
    }
}
